<template>
  <div class="content">
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div class="head" :style="{ background: 'url(' + activityMessage.goodImage + ')' }"></div>
      <div class="center">
        <div class="center_info">
          <h2>{{ activityMessage.goodName }}</h2>
          <div>{{ activityMessage.goodDescription }}</div>
          <h2>行程详情</h2>
          <div>
            {{ activityMessage.goodText }}
          </div>
          <h2>图文详情</h2>
          <div style="display: flex; flex-wrap: wrap">
            <van-image
              style="margin: 5px; border-radius: 20px"
              :src="item"
              v-for="(item, index) in selectImgList"
              :key="index"
            />
          </div>
          <h2>其他说明</h2>
          <div style="margin-bottom: 100px">{{ activityMessage.goodRemark }}</div>
          <div class="DI" v-show="activityMessage.state == '预约中'">
            <div class="DI_bottom" @click="BDXX">疗养登记</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerXX from "../../components/title.vue"

export default {
  components: {
    headerXX
  },
  data() {
    return {
      title: "行程详情",
      activityMessage: {},
      selectImgList: []
    }
  },
  methods: {
    BDXX() {
      localStorage.setItem(
        "LYDJform",
        JSON.stringify({
          destination: this.activityMessage.goodName,
          activityId: this.activityMessage.goodId,
          maxDate: this.activityMessage.endTime
        })
      )
      this.$router.push({
        path: "icsharedstation_LYDJ_submitForm"
      })
    }
  },
  mounted() {
    let arrayString = this.$route.query.HDXQ
    // 如果参数存在，则进行解码和解析
    if (arrayString) {
      // 解码并转换回数组
      let receivedArray = JSON.parse(decodeURIComponent(arrayString))
      console.log(receivedArray)
      receivedArray.goodImages.length && (this.selectImgList = receivedArray.goodImages.split(","))
      this.activityMessage = receivedArray
    }
  }
}
</script>

<style lang="less" scoped>
// @import "../../static/css/index.less";
.content {
  height: 100vh;
}
h2 {
  color: #027571;
  margin: 10px 0 10px 0;
}
.pull-refresh {
  position: relative;
}
.head {
  width: 100%;
  height: 190px;
  background-size: cover !important;
}
.center {
  width: 100%;
  font-size: 13px;
  background: #ffffff;
  position: absolute;
  top: 185px;
  border-radius: 10px;
  min-height: 480px;
  .center_info {
    margin: 0 10px 0 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.foot {
  margin: 147px 5% 0 5%;
  width: 90%;
  // height: 147px;
  font-size: 13px;
  border-radius: 5px;
  background-color: #ffffff;

  .foot_content {
    padding: 10px;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 2px;
    color: #454343;
  }
}
.DI {
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-top: 20px;
  position: sticky;
  bottom: 0;
  background-color: #ffffff;
}

.DI_top {
  letter-spacing: 2px;
  color: rgb(2, 117, 113);
  margin-bottom: 5px;
  font-size: 13px;
}

.DI_bottom {
  width: 90%;
  height: 48px;
  line-height: 48px;
  background: rgb(2, 117, 113);
  color: #fff;
  border-radius: 5px;
  letter-spacing: 3px;
  font-size: 15px;
  margin: 2px auto 10px;
}
</style>
